<template>
  <div>
    <headTop></headTop>
    <el-card>
      <el-tabs tab-position="left" style="height: 100%">
        <el-tab-pane label="今日考勤">
          <el-descriptions
            style="margin-top: 10px"
            :title= '`${today} 考勤概览`'
            :column="3"
            size="medium"
            border
          >
            <template slot="extra">         
              <el-button type="warning" size="small" @click="clickData">查看统计</el-button>
              <el-button type="primary" size="small" @click="clickData">导入</el-button>
            </template>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                打卡人数
              </template>
              40人
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                上班打卡
              </template>
              38人
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-location-outline"></i>
                下班打卡
              </template>
              38人
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-tickets"></i>
                迟到
              </template>
              <el-tag size="small">1人</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-office-building"></i>
                缺卡
              </template>
              1人
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-office-building"></i>
                请假
              </template>
              0人
            </el-descriptions-item>
          </el-descriptions>
          <div style="margin-top: 20px">
            <p class="record">{{this.today}} 详情记录</p>
            <searchView
              style="margin-top: 10px"
              :formOptions="searchFormData"
              v-on:onSearch="searchHandle"
            />

            <el-table>
              <el-table-column
                prop="name"
                label="姓名"
                width="100"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="age"
                label="日期"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="phone"
                label="上班打卡"
                width="120"
                align="center"
              ></el-table-column>
              <el-table-column prop="sex" label="下班打卡" align="center">
              </el-table-column>
              <el-table-column
                prop="age"
                label="状态"
                width="80"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="idcard"
                label="备注"
                align="center"
              ></el-table-column>
            </el-table>
            <el-pagination
              class="page-bottom"
              :page-size="currentPageSize"
              layout="prev, pager, next, jumper, ->, total"
              :total="totalCount"
              :current-page.sync="currentPage"
              @current-change="currentPageChange"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="历史考勤">
          <historyrecords></historyrecords>
        </el-tab-pane>
        <el-tab-pane label="考勤统计"
          ><recordStatistics></recordStatistics
        ></el-tab-pane>
        <el-tab-pane label="考勤制度"><workDay></workDay></el-tab-pane>
      </el-tabs>
    </el-card>
    <el-dialog
  title="考勤统计"
  :visible.sync="dialogVisible"
  width="50%"
  :before-close="handleClose">
  <workDataChart></workDataChart>
</el-dialog>
  </div>
  
</template>

<script>
import searchView from "@/components/searchView";
import headTop from "@/components/headTop";
import historyrecords from "./work/history-records";
import recordStatistics from "./work/recordStatistics";
import workDay from "./work/workDay";
import workDataChart from "./work/workDataChart";
import moment from 'moment';

export default {
  inject: ["reload"],
  data() {
    return {
      searchFormData: [
        {
          label: "姓名",
          prop: "name",
          element: "el-input",
        },

        {
          label: "状态",
          prop: "status",
          element: "el-select",
          options: [
            { label: "正常", value: 0 },
            { label: "迟到", value: 1 },
            { label: "缺勤", value: 2 },
            { label: "请假", value: 3 },
            { label: "早退", value: 4 },
          ],
        },
      ],
      totalCount: 0,
      currentPage: 0,
      currentPageSize: 10,
      pageCount: 1,
      dialogVisible:false,
      today:moment(new Date()).format('YYYY-MM-DD')
    };
  },
  components: {
    searchView,
    headTop,
    historyrecords,
    recordStatistics,
    workDay,
workDataChart
  },
  methods:{
    clickData(){
      this.dialogVisible = true;
    },
    handleClose(){
      this.dialogVisible = false;
    },
    searchHandle(){
      
    }
  }
};
</script>
<style lang="less" scoped>
.record {
  font-weight: bold;
}
</style>